
<template>
    <div class="booknei subchild content1">
        <header class="head">
                <van-icon name="arrow-left" size="20" @click="ClickLeft"/>
                <h1 v-if="title" class="van-ellipsis">{{title.title}}</h1>
                <div v-else>章节</div>
                <van-icon  name="setting"  size="20"/>
        </header>
        <div class="content">
            <div v-for="(item,index) in content" :key="index">{{item}}</div>
                <div class="qiehuan">
                    <span @click.stop="top">上一章</span>
                    <span @click.stop="next">下一章</span>
                </div>
        </div>
        
    </div>
</template>

<script>
import {mapState} from "vuex";
import { Toast } from 'vant';
export default {
    data(){
        return{
            title:{},
            content:[],
            index:0,
        }
    },
    computed:{
        ...mapState(["booksList"])
    },
    methods:{
         ClickLeft(){
            this.$router.back(-1);
        },
        top(){
            var scollrTop = document.documentElement.scrollTop || document.body.scrollTop

            if(this.index > 0 ){
                var b = this.index -1
                this.title = this.booksList[b]
                 this.$ajax.fictionContent({
                    chapterId:this.title.chapterId
                }).then(res=>{
                    if(res.code==200){
                        this.index = b
                        this.content=res.data.content
                        document.documentElement.scrollTop = document.body.scrollTop = 0
                    }
                })
            }else{
                Toast('这已经是第一章了');
            }
        },
        next(){
            var scollrTop = document.documentElement.scrollTop || document.body.scrollTop

            if(this.index<this.booksList.length-1){
                var a = this.index +1
                console.log(a)
                this.title = this.booksList[a]
                this.$ajax.fictionContent({
                    chapterId:this.title.chapterId
                }).then(res=>{
                    if(res.code==200){
                        this.index = a
                        this.content=res.data.content
                       document.documentElement.scrollTop = document.body.scrollTop = 0
                    }
                })
            }else{
                 Toast('已经是最后一章了');
            }  
        }
    },
    mounted(){
        this.booksList.forEach((item,index)=>{
            if(item.chapterId==this.$route.query.chapterId){
                this.index = index
            }
        })

        this.title = this.booksList[this.index]

       var chapterId = this.$route.query.chapterId
       this.$ajax.fictionContent({
           chapterId:chapterId
       }).then(res=>{
           if(res.code==200){
               this.content=res.data.content
           }
       })
    }
}
</script>

<style lang="scss" scoped>
.head{
    position: fixed;
    top: 0;
    height: 46px;
    padding: 0 20px;
    color: #fff;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #b83320;
    h1{
        font-size: 16px;
        width: 200px;
        text-align: center
    }
}
.content{
    width: 100%;
    overflow: hidden;
    text-indent:2em;
    font-size: 14px;
    background-color: rgb(238,230,220);
}
.content1{
    width: 100%;
    background-color: rgb(238,230,220);
}
.qiehuan{
    margin-top: 20px;
    display: flex;
    width: 100%;
    justify-content: space-around;
    padding-bottom: 20px;
}
</style>
